<template>
    <div class="unit-notice">

        <div class="notice-content">
            <template v-if="tableData && tableData.length > 0">
                <div class="items" v-for="(item , ind) in tableData" :key="ind">
                    <content-item :data="item" :title="`${ind+1}.${item.notice}`" :rowguid="item.notice">
                        <span slot="time">{{item.publishtime}}</span>
                        <template slot="content">
                            <div class="content-out">
                                <my-tag v-show="!!item.area">{{item.area}}</my-tag>
                                <my-tag v-show="!!item.noticetype">{{item.noticetype}}</my-tag>
                                <my-tag v-show="!!item.industry && item.industry != '未知'">{{item.industry}}</my-tag>
                                <my-tag v-show="!!item.price && item.noticetype=='中标公告'" :is-default="false">{{item.price +'元'}}</my-tag>
                            </div>
                        </template>
                    </content-item>
                </div>
            </template>

            <div class="empty" v-if="!tableData.length">
                <span>暂无数据</span>
            </div>
            <!-- <empty-list v-if="!tableData.length" :margin="5">
                <span>暂无数据</span>
            </empty-list> -->
        </div>

        <my-pagination class="pagination" ref="page" v-model="tableData" :action="`${$store.state.api.tbUrl}/searchrelated/noticelist.json`" :search="pgData"
            :auto-show="false" :afterQuery="noticeListAfterQuery" layout="prev, pager,next"></my-pagination>
    </div>
</template>

<script>
import contentItem from './item.vue';
import EmptyList from '@components/sys/empty-list';
import { mapGetters, mapActions } from 'vuex';
import notice from '@/mixins/notice.js';

export default {
    mixins: [notice],
    props: {
        searchObj: {
            type: Object,
            default: () => {
                return {
                    area: '',
                    type: '',
                    title: '',
                };
            },
        },
        showASearch: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        contentItem,
        EmptyList,
    },
    data() {
        return {
            tableData: [],
            cityListByProvinceSel: null,

            cityIds: [],
            transferCityIds: [], // cityIds 与 pgData.area 中转
            provinceIds: [],

            noticeList: [],
        };
    },
    computed: {
        pgData: function () {
            return {
                sortname: 'publishtime',
                pagesize: 6,
                title: this.searchObj.title,
                area: this.searchObj.area ?  this.searchObj.area[this.searchObj.area.length - 1] : '',
                type: this.searchObj.type,
            };
        },
    },
    watch: {
        'pgData.area': function (n, o) {
            this.deSearch();
        },
        'pgData.type': function (n, o) {
            this.deSearch();
        },
    },
    methods: {
        deSearch: function () {
            this.$nextTick(() => {
                this.$refs.page.queryData();
            });
        },
        reload: function () {
            this.$refs.page.reload();
        },

        noticeListAfterQuery(rows, data) {
            // this.setCzc(['首页', '翻页' , '查公告', this.$refs.page.currentPage ,'home-page-noticeLookup'])
        },
    },
    mounted() {
    },
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
.unit-notice {
    width: 810px;
    margin: 0 auto;

    .notice-content {
        border: 1px solid #e7e7e7;
        margin-top: 12px;
        height: 212px;
        .items {
            height: 35px;
            line-height: 35px;
            padding: 0 10px;
            // & + .items {
            //     border-top: 1px solid #e7e7e7;
            // }
            &:not(:last-child) {//不是最后一个
				border-bottom: 1px solid #e7e7e7;
			}
            &:first-child {
				border-bottom: 1px solid #e7e7e7;
			}
        }
    }
    .pagination {
        margin-top: 10px;
    }

    .empty {
        height: 212px;
        text-align: center;
        padding-top: 80px;
        color: #bbb;
        font-weight: bold;
    }

    .content-out{
        margin: 0 10px 0 15px;
        .my-tag{
            margin-right: 0px !important;
        }
    }
}
</style>